<template>
  <!-- 查看原因弹框 -->
  <div class="reason">
    <el-dialog
      title="审批拒绝原因"
      :visible.sync="isReason"
      width="30%"
      :before-close="cancel">
      <div class="reason-content">
        <div class="reason-title">拒绝原因</div>
        <div class="reason-text">
          <el-input
            type="textarea"
            :rows="5"
            v-model="textarea"
            :placeholder="reason"
            :disabled="true"
            class="reason">
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="success" @click="submit">重新申请</el-button>
          <el-button @click="cancel">取消</el-button>
        </span>
    </el-dialog>
    <editor @close="closeEditor" :is-editor="isEditor" :id-list="idList"></editor>
  </div>
</template>

<script>
import Editor from './editor'
export default {
  name:'reason',
  props: {
    isReason:{
      type: Boolean,
      default: () => {
        return false
      }
    },
    idList:{
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
      return {
        editorForm:{ //编辑对话框中的表单
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        textarea:'',//文本框内容
        reason:'直播封面不符合要求，存在违规信息，请修改。',//拒绝原因
        isEditor: false,
        id:'',
      }
  },
  components:{ Editor },
  watch:{
    idList(val){
      //获取传过来的id
      this.id = this.idList[0]
    }
  },
    methods: {
    //确定
    submit(){
      this.isEditor = true
      this.cancel()
    },
    //取消
    cancel(){
      this.$emit('close',false);
    },
    //关闭申请&编辑对话框
    closeEditor(isEditor){
      this.isEditor = isEditor
    },
  }
}
</script>

<style lang="less" scoped>
.reason-content{
  display: flex;

  .reason-title{
    font-weight:bold;
    margin: 10px 10px 0 0;
    width: 70px;
  }

  .reason-text{
    width: 100%;

    /deep/ .el-textarea__inner{
      width: 95%;
      color: black;
    }

    .reason{
      color: black !important;
    }
  }
}
</style>
